<template>
  <div class="banxin list">
    <div class="title-top flex">
      <h3>{{ myTitle }}</h3>
      <div class="count">{{ arr.length }}</div>
    </div>
    <TodoListItem v-for="item in arr" :key="item.id" :data="item">
      <template v-slot:edit>
          <input type="button" value="编辑" />
      </template>
      <template v-slot:del>
          <span v-if="item.isComplete">
        <input type="button" value="删除" @click="deleteItem(item)" />
      </span>
      </template>
    </TodoListItem>
  </div>
</template>
 
<script>
import TodoListItem from '../components/todoListItem.vue'
// import bus from '../untils/bus.js'

export default {
  components: { TodoListItem },
  props: ["arr","myTitle"],
  methods: {
    deleteItem(item) {
      if (!confirm("确定要删除吗")) return;
    this.$store.commit('del',item.id)
    }
  },
  computed:{
    list(){
      return this.$store.state.list
    }
  }
};
</script>
 
<style lang = "less" scoped>
.list .title-top {
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.title-top .count {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  background-color: #ccccff;
}
</style>